<template>
  <div>
    <h2>添加新任务</h2>
    <form @submit.prevent="handleSubmit" class="add-form">
      <div class="form-group">
        <label for="title">任务名称：</label>
        <input
          id="title"
          v-model="newTask.title"
          type="text"
          placeholder="请输入任务名称"
          required
          class="input"
        />
      </div>
      <div class="form-group">
        <label for="status">任务状态：</label>
        <select id="status" v-model="newTask.status" class="input">
          <option value="待开始">待开始</option>
          <option value="进行中">进行中</option>
          <option value="已完成">已完成</option>
        </select>
      </div>
      <button type="submit" class="btn">添加任务</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const newTask = ref({
  title: '',
  status: '待开始'
})

const handleSubmit = () => {
  // 模拟保存任务
  alert(`任务已添加：${newTask.value.title} (${newTask.value.status})`)
  router.push('/')
}
</script>

<style>
.add-form {
  max-width: 500px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background: #0056b3;
}
</style>